<!-- 使用封装的组件创建highcharts实例 -->
<template>
    <vue-highcharts 
        type="chart" 
        :options="chartOptions" 
        @onRender="onRender">
    </vue-highcharts>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, computed } from "vue";

    let setDataX = ref(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
						 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
    let setDataY = ref([{
			name: 'Tokyo',
			data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		}, {
			name: 'New York',
			data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
		}, {
			name: 'Berlin',
			id: 'berlin',
			data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
		}, {
			name: 'London',
			data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
		}])

    let chartOptions = computed(()=> ({
		title: {
			text: 'Monthly Average Temperature',
			x: -20 //center
		},
		subtitle: {
			text: 'Source: WorldClimate.com',
			x: -20
		},
		xAxis: {
			categories: setDataX.value
		},
		yAxis: {
			title: {
				text: 'Temperature (°C)'
			},
			plotLines: [{
				value: 0,
				width: 1,
				color: '#808080'
			}]
		},
		tooltip: {
			valueSuffix: '°C'
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'middle',
			borderWidth: 0
		},
		series: setDataY.value
	}))
    console.log(chartOptions.value)

    const onRender = () =>{
        console.log('chart rendered');
        
    }

    onMounted(()=>{  })
</script>
<style scoped>
</style>